<!DOCTYPE html>
<html>

<head>
  <title>01-display_table</title>
  <style type="text/css">
    .container {
      /* 存在高度永远一致的局限性、兼容性不好 */
      display: table;
      width: 100%;
    }

    .left {
      display: table-cell;
      background-color: green;
      width: 100px;
      height: 100px;
    }

    .middle {
      display: table-cell;
      background-color: red;
      height: 300px;
    }

    .right {
      display: table-cell;
      background-color: blue;
      width: 100px;
      height: 150px;
    }
  </style>
</head>

<body style="margin:0;">
  <div class="container">
    <div class="left">I am left</div>
    <div class="middle">I am middle</div>
    <div class="right">I am right</div>
  </div>
  <div style="height: 100px; background-color: yellow;"></div>
</body>

</html>